<template>
  <div class="playMusic">
    <div class="bg" :style="{ backgroundImage: `url(${playList[playIndex].al.picUrl})` }"></div>
    <div class="playtop">
      <van-nav-bar
        :title="playList[playIndex].name"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
      <svg class="icon" aria-hidden="true" v-if="!palyflag">
        <use xlink:href="#icon-fenxiang" />
      </svg>
    </div>
    <div class="playconten">
      <img src="../../public/imgs/needle-ab.png" alt />
      <div class="bgcboix">
        <div class="bgc" :class="palyflag ? '' : 'turn'">
          <img :src="playList[playIndex].al.picUrl" alt />
        </div>
      </div>
    </div>
    <div class="playlyric" ref="playlyric">
      <p
        :class="{ active: (parseInt(currentime) * 1000 < item.time && parseInt(currentime) * 1000 > item.pre) }"
        v-for="(item) in lyricList"
        :key="item"
      >{{ item.lyric }}</p>
    </div>
    <div class="playfooter">
      <div class="iconbox">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-repeat2" />
        </svg>
      </div>
      <div class="iconbox">
        <svg class="icon" aria-hidden="true" @click="goplay(-1)">
          <use xlink:href="#icon-shangyiqu101" />
        </svg>
      </div>
      <div class="iconbox" @click="paly">
        <svg class="icon" aria-hidden="true" v-if="palyflag">
          <use xlink:href="#icon-bofang_o" />
        </svg>
        <svg class="icon" aria-hidden="true" v-else>
          <use xlink:href="#icon-zanting_o" />
        </svg>
      </div>

      <div class="iconbox">
        <svg class="icon" aria-hidden="true" @click="goplay(1)">
          <use xlink:href="#icon-xiayiqu101" />
        </svg>
      </div>
      <div class="iconbox">
        <svg class="icon" aria-hidden="true" @click="alertMenu">
          <use xlink:href="#icon-liebiao" />
        </svg>
      </div>
    </div>
    <van-popup v-model:show="show" position="bottom" :style="{ height: '70%' }">
      <div class="popupbox">
        <div class="playList">
          <div class="play" v-for="(item, index) in playList" :key="item.id">
            <div class="left" @click="play(index)" :class="playIndex==index?'active':''">
              <span>
                {{index+1}}.{{ item.name }} --
                <span v-for="(item) in item.ar" :key="item.id">{{ item.name }}</span>
              </span>
            </div>
            <div class="right" @click="deletmusic(index)">x</div>
          </div>
        </div>
        <div class="bottombtn" @click="show = false">关闭</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
// import { watch } from 'vue'
import { playlyric } from '../js/axios'
import { Dialog } from 'vant';
// import { mapState, mapMutations } from 'vuex'


export default {
  props: {
    currentime: {
      type: String,
      default: 0,
    },
    playList: {
      type: Object,
      default: {},
    },
    playIndex: {
      type: Number,
      default: 0,
    },
    palyflag: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: 0,
    }
  },
  data () {
    return {
      lyric: '',
      show: false,
      actions: [
        { name: '选项' },
        { name: '选项' },
        { name: '选项' }
      ],
    }
  },
  created () {
    // console.log(this.playList)
    this.getplaylyric(this.id)
    // this.getplaylyric(this.id)

  },
  computed: {
    lyricList () {
      let arr = []
      this.lyric.split(/\n/igs).map((item, i) => {
        let min = parseInt(item.slice(1, 3))
        let sec = parseInt(item.slice(4, 6))
        let mill = parseInt(item.slice(7, 10))

        arr.push({
          min, sec, mill,
          lyric: item.slice(11, item.length),
          time: mill + sec * 1000 + min * 60 * 1000,
        })
      })
      arr.forEach((item, i) => {
        if (i == 0) {
          item.pre = 0
        } else {
          item.pre = arr[i - 1].time
        }
      })
      // console.log(arr)
      return arr
    }
  },

  methods: {
    deletmusic(index){
      this.playList.splice(index,1)
      this.$store.commit('setplayList', this.playList)

    },
    play (index) {
      // console.log(al)
      // this.$emit('playdata',al)
      this.$store.commit('setpalyIndex', index)
    },
    onSelect (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      // this.show = true;
      Toast(item.name);
    },
    alertMenu () {
      this.show = true;
      // console.log(this.show)
    },
    onCancel () {
      this.show = false;
      Toast('cancel');
    },
    goplay (num) {
      // console.log(this.playList)
      // console.log(this.playIndex )
      if (num == 1) {
        this.playIndex >= this.playList.length-1 ? Dialog({ message: '已经是最后一首了' }):this.$store.commit('setpalyIndex', this.playIndex + 1) 

      } else {
        this.playIndex == 0 ? '' : this.$store.commit('setpalyIndex', this.playIndex - 1)


      }
    },
    getplaylyric (id) {
      var that = this
      playlyric(id).then(res => {
        that.lyric = res.data.lrc.lyric
        // console.log(that.lyric )

      })
    },
    onClickLeft () {
      this.$emit('flashow')
    },
    paly () {
      // this.palyflag=!this.palyflag
      this.$emit('sonpaly')
    }
  },
  watch: {
    playList () {
      // console.log(this.playList)
    },
    id () {
      this.getplaylyric(this.id)
    },
    currentime (newval) {
      // console.log(newval)
      // console.log([this.$refs.playlyric])
      let active = document.querySelector('p.active')
      // console.log(active)


      if (active) {
        this.$refs.playlyric.scrollTop = active.offsetTop - 30
      }
      // let h =this.$refs.playlyric.offsetHeight
      // if(offsetTop>h){

      // }
    }
  }
}
</script>
<style >
.playMusic .van-nav-bar {
  background: none;
  color: #fff;
}
.playMusic .van-nav-bar__title {
  color: #fff;
}
</style>

<style lang="less">
.playMusic {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  // z-index: 999;
  .van-popup--bottom {
    .popupbox {
      .playList {
        margin-bottom: 1.2rem;
        .play {
          display: flex;
          justify-content: space-between;
          margin: 0.2rem 0;
          padding: 0.2rem;
          border-bottom: 0.01rem solid #ccc;
          .active {
            color: #FF9900;
          }
          .left {
            overflow: hidden;
            width: 93%;
          }
          .right {
            width: 7%;
            text-align: center;
          }
        }
      }
      .bottombtn {
        position: fixed;
        bottom: 0.2rem;
        // text-align: center;
        height: 1rem;
        width: 100%;
        text-align: center;
        background-color: #fff;
        color: red;
        font-size: 0.4rem;
        line-height: 1rem;
      }
    }
  }
  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(20px);
    // background-color: #fff;
  }
  .playtop {
    .icon {
      position: fixed;
      top: 0.2rem;
      right: 0.2rem;
      width: 0.5rem;
      height: 0.5rem;
      z-index: 999;
    }
  }
  .playconten {
    position: relative;
    img {
      position: absolute;
      height: 2rem;
      width: auto;
      left: 50%;
      top: 1rem;
      z-index: 99;
    }
    .bgcboix {
      position: absolute;
      width: 4rem;
      height: 4rem;
      left: 50%;
      top: 2rem;
      transform: translateX(-50%) !important;
      .bgc {
        background: url("../../public/imgs/m-song-turn.png") no-repeat center
          center;
        background-repeat: no-repeat;
        width: 4rem;
        height: 4rem;
        // z-index: 999;
        // background-size: ;
        // position: absolute;
        // left: 25%;
        // top: 2rem;
        // transform: translateX(-50%) !important;
        position: relative;
        img {
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .turn {
        animation: turn 5s linear infinite;
        @keyframes turn {
          0% {
            transform: rotate(0deg);
          }
          25% {
            transform: rotate(90deg);
          }
          50% {
            transform: rotate(180deg);
          }
          75% {
            transform: rotate(270deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
      }
    }
  }
  .playlyric {
    color: #fff;
    position: absolute;
    top: 8rem;
    left: 50%;
    transform: translateX(-50%);
    overflow: scroll;
    height: 4rem;
    text-align: center;
    .active {
      color: red;
    }
  }
  .playfooter {
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 1rem;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    .iconbox {
      .icon {
        width: 0.5rem;
        height: 0.5rem;
      }
    }
  }
}
</style>